<template>
    <div class="slide-container">
        <input type="range" class="slider" min="0" max="255" v-model="colorValue" :title="colorValue" :style="{ 'background': slideColor }" />
    </div>
</template>

<style lang="scss" scoped>
.slide-container {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: rgb(175, 175, 175);
}
</style>

<script>
export default {
    props: ['color', 'initiate'],
    data() {
        return {
            colorValue: 17
        };
    },
    computed: {
        slideColor() {
            return `linear-gradient(90deg, black, ${this.color})`;
        }
    },
    watch: {
        initiate(newValue) {
            this.colorValue = newValue;
        },
        colorValue(newValue) {
            this.$emit('color-changed', { type: this.color, value: newValue });
        }
    }
}
</script>